<template>
  <el-dialog title="数据导入" :visible="isShow" width="30%">

    <el-upload
      :http-request="uploadImg"
      class="upload-demo"
      action=""
      :before-remove="beforeRemove"
      multiple
      accept=".xlsx, .xls"
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button size="small" type="primary" style="background-color: #5f84ff;width:221px;height:36px;margin-left:30%">点击上传</el-button>
      <div slot="tip" class="el-upload__tip" style="margin-left:20%">只能上传.xlsx/ .xls文件，且不超过500kb</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button
        style="
          background-color: #fbf4f0 !important;
          border: none;
          margin-right: 20px;
        "
        @click="shut"
      >取 消</el-button>
      <el-button
        type="primary"
        style="
          background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
          color: #fff;
          margin-right: 90px;
          border: none;
        "
        @click="submit"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { dataImport } from '@/api/guanli'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [],
      file: ''
    }
  },
  methods: {

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    async uploadImg(data) {
      console.log(data.file)
      this.file = new FormData()
      this.file.append('fileName', data.file)

      this.$emit('updata:input', false)
    },
    async   submit() {
      const res = await dataImport(this.file)
      console.log(res)
      this.shut()
    },
    shut() {
      this.isShow = false
    }
  }

}
</script>
